/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-06 
 */


import { defineComponent } from 'vue'
import './css/Dot.scss'
export default defineComponent({
  name: 'Dot',
  props: {
    currentIndex: { type: Number },
    itemLength: { type: Number },
    hasDot: { type: Boolean, default: true },
    dotBgColor: { type: String, required: true }
  },
  setup(props, { emit, slots }) {
    
    function renderDom() {
      const { itemLength, currentIndex, dotBgColor } = props;
      const ary = [];
      for (let index = 0; index < itemLength; index++) {
        ary.push((<div class="dot-item">
          <a
            href="javascript:;"
            class="dot-link"
            style={ {backgroundColor: index === currentIndex ? dotBgColor : '#fff' }}
            onClick={dotClick.bind(null, index)}
            ></a>
        </div>))
      }
      return ary
    }
    
    function dotClick(index) {
      emit('dotClick', index);
    }
    return () => {
      return (
        <div class='dot-wrapper'>
           { renderDom() }
        </div>
      )
    }
  }
})
